<template>
  <a-modal
    :title="title"
    :width="width"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭"
  >
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item label="名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input
                :disabled="disableSubmit"
                v-decorator="['mingCheng', validatorRules.mingCheng]"
                placeholder="请输入名称"
              ></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="等级" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-dict-select-tag
                :disabled="disableSubmit"
                type="list"
                v-decorator="['dengJi', validatorRules.dengJi]"
                :trigger-change="true"
                dictCode="gkak_dj"
                placeholder="请选择等级"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item label="联系人" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input
                :disabled="disableSubmit"
                v-decorator="['lianXiRen', validatorRules.lianXiRen]"
                placeholder="请输入联系人"
              ></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="联系电话" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input
                :disabled="disableSubmit"
                v-decorator="['lianXiDianHua', validatorRules.lianXiDianHua]"
                placeholder="请输入联系电话"
              ></a-input>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item label="行政区" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <!-- <a-input :disabled="disableSubmit"  v-decorator="[ 'diQv', validatorRules.diQv]" placeholder="请输入地区"></a-input> -->
              <a-cascader
                :options="options"
                @change="onChangeXZQ"
                placeholder="请选择行政区"
                changeOnSelect
                :loadData="loadData"
                v-decorator="['diQv', validatorRules.diQv]"
                :disabled="disableSubmit"
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="图片" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-upload
                :disabled="disableSubmit"
                v-decorator="['tuPian', validatorRules.tuPian]"
                :trigger-change="true"
              ></j-upload>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item label="简介" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input
                :disabled="disableSubmit"
                v-decorator="['jianJie', validatorRules.jianJie]"
                placeholder="请输入简介"
              ></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="地址" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input
                :disabled="disableSubmit"
                v-decorator="['diZhi', validatorRules.diZhi]"
                placeholder="请输入地址"
              ></a-input>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item label="挂号规则" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input
                :disabled="disableSubmit"
                v-decorator="['guaHaoGuiZe', validatorRules.guaHaoGuiZe]"
                placeholder="请输入挂号规则"
              ></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="成立时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-date
                :disabled="disableSubmit"
                placeholder="请选择成立时间"
                v-decorator="['chengLiShiJian', validatorRules.chengLiShiJian]"
                :trigger-change="true"
                style="width: 100%"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item label="经度" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input
                :disabled="disableSubmit"
                v-decorator="['jingDu', validatorRules.jingDu]"
                placeholder="请输入经度"
              ></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="维度" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input
                :disabled="disableSubmit"
                v-decorator="['weiDu', validatorRules.weiDu]"
                placeholder="请输入维度"
              ></a-input>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item label="网格码" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input
                :disabled="disableSubmit"
                v-decorator="['wangGeMaId', validatorRules.wangGeMaId]"
                placeholder="请输入网格码"
              ></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="机构类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-dict-select-tag
                :disabled="disableSubmit"
                type="list"
                v-decorator="['type', validatorRules.type]"
                :trigger-change="true"
                dictCode="gkak_sbjglx"
                placeholder="请选择机构类型"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item label="备注" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-textarea
                :disabled="disableSubmit"
                v-decorator="['beiZhu', validatorRules.beiZhu]"
                rows="4"
                placeholder="请输入备注"
              />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
import pick from 'lodash.pick'
import { validateDuplicateValue } from '@/utils/util'
import JDate from '@/components/jeecg/JDate'
import JUpload from '@/components/jeecg/JUpload'
import JDictSelectTag from '@/components/dict/JDictSelectTag'
import { httpAction, getAction } from '@/api/manage'

export default {
  name: 'GkakJiGouManageModal',
  components: {
    JDate,
    JUpload,
    JDictSelectTag
  },
  data() {
    return {
      form: this.$form.createForm(this),
      disableSubmit: false,
      title: '操作',
      width: 1000,
      options: [],
      xzqID: undefined,
      visible: false,
      model: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      confirmLoading: false,
      validatorRules: {
        mingCheng: { rules: [{ required: true, message: '请输入名称!' }] },
        dengJi: { rules: [{ required: true, message: '请输入等级!' }] },
        lianXiRen: { rules: [{ required: true, message: '请输入联系人!' }] },
        lianXiDianHua: {
          rules: [
            { required: true, message: '请输入联系电话!' },
            { pattern: /^1[3456789]\d{9}$/, message: '请输入正确的手机号码!' }
          ]
        },
        diQv: { rules: [{ required: true, message: '请输入地区!' }] },
        tuPian: { rules: [] },
        jianJie: { rules: [] },
        diZhi: { rules: [{ required: true, message: '请输入地址!' }] },
        guaHaoGuiZe: { rules: [] },
        chengLiShiJian: { rules: [{ required: true, message: '请输入成立时间!' }] },
        beiZhu: { rules: [] },
        jingDu: { rules: [] },
        weiDu: { rules: [] },
        wangGeMaId: { rules: [] },
        type: { rules: [] }
      },
      url: {
        add: '/gkakJiGouManage/add',
        edit: '/gkakJiGouManage/edit'
      }
    }
  },
  created() {},
  methods: {
    // 行政区
    onChangeXZQ(value) {
      this.xzqID = value[value.length - 1]
    },
    loadData(selectedOptions) {
      const targetOption = selectedOptions[selectedOptions.length - 1]
      getAction(
        `/gkakKongJianController/getXingZhengQvByPid?pid=${selectedOptions[selectedOptions.length - 1].value}&lavel=${
          selectedOptions[selectedOptions.length - 1].lavel
        }`,
        {}
      ).then(res => {
        if (res.success) {
          // targetOption.loading = false
          targetOption.children = [] //先重置空
          for (let i = 0; i < res.result.length; i++) {
            targetOption.children.push(res.result[i])
          }
          this.options = [...this.options]
        }
      })
    },

    add() {
      this.edit({})
    },
    edit(record) {
      this.form.resetFields()
      this.model = Object.assign({}, record)
      getAction(`/gkakKongJianController/getXingZhengQvByPid?pid=${0}&lavel=${0}`, {}).then(res => {
        if (res.success) {
          this.options = res.result
        }
      })
      // record.diQv='110000'
      if (record.diQvCode) {
        this.model.diQv = record.diQvCode.split('-')
        let newID = this.model.diQv
        this.xzqID = newID[newID.length - 1]
        debugger
        if (newID && newID[0]) {
          debugger
          getAction(`/gkakKongJianController/getXingZhengQvByPid?pid=${newID[0]}&lavel=${1}`).then(res => {
            if (res.success) {
              this.options.forEach((k, index) => {
                if (k.value == newID[0]) {
                  k.children = []
                  for (let i = 0; i < res.result.length; i++) {
                    k.children.push(res.result[i])
                  }
                }
              })
              this.options = [...this.options]
              if (newID && newID[1]) {
                getAction(`/gkakKongJianController/getXingZhengQvByPid?pid=${newID[1]}&lavel=${2}`).then(res => {
                  if (res.success) {
                    this.options.forEach((k, index) => {
                      k.children &&
                        k.children.forEach(j => {
                          if (j.value == newID[1]) {
                            j.children = []
                            for (let i = 0; i < res.result.length; i++) {
                              j.children.push(res.result[i])
                            }
                          }
                        })
                    })
                    this.options = [...this.options]
                    if (newID && newID[2]) {
                      getAction(`/gkakKongJianController/getXingZhengQvByPid?pid=${newID[2]}&lavel=${3}`).then(res => {
                        if (res.success) {
                          this.options.forEach((k, index) => {
                            k.children &&
                              k.children.forEach(j => {
                                j.children &&
                                  j.children.forEach(t => {
                                    if (t.value == newID[2]) {
                                      t.children = []
                                      for (let i = 0; i < res.result.length; i++) {
                                        t.children.push(res.result[i])
                                      }
                                    }
                                  })
                              })
                          })
                          this.options = [...this.options]
                        }
                      })
                    }
                  }
                })
              }
            }
          })
        }
      }
      this.visible = true
      this.$nextTick(() => {
        this.form.setFieldsValue(
          pick(
            this.model,
            'mingCheng',
            'dengJi',
            'lianXiRen',
            'lianXiDianHua',
            'diQv',
            'tuPian',
            'jianJie',
            'diZhi',
            'guaHaoGuiZe',
            'chengLiShiJian',
            'beiZhu',
            'jingDu',
            'weiDu',
            'wangGeMaId',
            'type'
          )
        )
      })
    },
    close() {
      this.$emit('close')
      this.visible = false
    },
    handleOk() {
      const that = this
      // 触发表单验证
      this.form.validateFields((err, values) => {
        if (!err) {
          that.confirmLoading = true
          let httpurl = ''
          let method = ''
          if (!this.model.id) {
            httpurl += this.url.add
            method = 'post'
          } else {
            httpurl += this.url.edit
            method = 'put'
          }
          if (values.diQv) {
            values.diQv = values.diQv.join()

            let index = values.diQv.lastIndexOf(',')
            values.diQv = values.diQv.substring(index + 1, values.diQv.length)
          }

          let formData = Object.assign(this.model, values)
          console.log('表单提交数据', formData)
          httpAction(httpurl, formData, method)
            .then(res => {
              if (res.success) {
                that.$message.success(res.message)
                that.$emit('ok')
              } else {
                that.$message.warning(res.message)
              }
            })
            .finally(() => {
              that.confirmLoading = false
              that.close()
            })
        }
      })
    },
    handleCancel() {
      this.close()
    },
    popupCallback(row) {
      this.form.setFieldsValue(
        pick(
          row,
          'mingCheng',
          'dengJi',
          'lianXiRen',
          'lianXiDianHua',
          'diQv',
          'tuPian',
          'jianJie',
          'diZhi',
          'guaHaoGuiZe',
          'chengLiShiJian',
          'beiZhu',
          'jingDu',
          'weiDu',
          'wangGeMaId',
          'type'
        )
      )
    }
  }
}
</script>
